<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../public/static/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../public/static/ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="../dist/css/skins/skin-blue.min.css">
<style>
    .detail-title {
        width: 100px
    }

    .file {
        position: relative;
        height: 100px;
        filter: alpha(opacity:0);
        opacity: 0;
        width: 100px
    }

    #localImag {
        position: absolute
    }

</style>


<div class="box-body">
    <form>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th class="detail-title">头像</th>
                <td>
                    <div class="site-demo-upload">
                        <img id="LAY_demo_upload" src="">

                        <div class="site-demo-upbar">
                            <div id="localImag"><img id="preview" src="../public/defauhead.png" width="100"
                                                     height="100" style="display: block"></div>
                            <input type="file" name="file" id="doc" onchange="javascript:setImagePreview();"
                                   class="file">
                            <input type="hidden" name="module" lay-verify="required" autocomplete="off"
                                   class="layui-input" placeholder="" value="7012">
                        </div>
                    </div>
            </tr>
            <tr>
                <th>部门</th>
                <td>
                    <div>
                        <select class="form-control">
                            <option value="">—— 请选择 ——</option>
                            <option value="1">技术部</option>
                            <option value="2">财务部</option>
                            <option value="3">综合管理部</option>
                            <option value="4">市场营销部</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <th class="detail-title">工号</th>
                <td>
                    <div>
                        <input type="text" class="form-control" id="inputSuccess" placeholder="请填写工号">
                    </div>
                </td>
            </tr>
            <tr>
                <th class="detail-title">姓名</th>
                <td>
                    <div>
                        <input type="text" class="form-control" id="inputSuccess" placeholder="请填写姓名">
                    </div>
                </td>
            </tr>
            <!--
            <tr>
                <th>性别</th>
                <td>
                    <div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio" name="optionsRadios" id=""
                                       value="0" checked="">
                                男
                            </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio" name="optionsRadios" id=""
                                       value="1">
                                女
                            </label>
                        </div>

                    </div>
                </td>
            </tr>
            -->
            <tr>
                <th class="detail-title">手机号</th>
                <td>
                    <div>
                        <input type="text" class="form-control" id="inputSuccess" placeholder="请填写手机号">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <button type="reset" id="resetpws" class="btn bg-orange btn-lg">重置密码</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" id="content" class="btn btn-success btn-lg">提交</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

<!-- layer -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- layer -->
<script src="../../public/static/layer/layer.js"></script>
<script>

    //提交信息
    $("#content").on('click',function(){
        layer.msg('提交成功', {icon: 1, time: 1500},function(){
            window.parent.location.reload();
            parent.layer.close(index);
        });
    });

    //重置密码
    $("#resetpws").on('click',function(){
        layer.msg('密码被成功地重置为"123456"', {icon: 1, time: 2000},function(){
            window.parent.location.reload();
            parent.layer.close(index);
        });
    });




    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '100px';
            imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
//IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
//必须设置初始大小
            localImagId.style.width = "100px";
            localImagId.style.height = "100px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>